<template>
  <div>
    <Common :sidebarItems="sidebarItems">
      <component v-if="$frontmatter.home" :is="homeCom" />
      <Page v-else :sidebar-items="sidebarItems" />
      <Footer v-if="$frontmatter.home" class="footer" />
    </Common>
    <rotate></rotate>
    <div class="mask-box" v-if="showMask">
      <div class="dialog">
        <div class="title">请输入通行码</div>
        <div class="content">
          <div class="input-love-code">
            <label>对对碰: </label>
            <input
              type="text"
              v-model="loveCode"
              @keyup.enter="checkLoveCode"
            />
          </div>
          <div class="action">
            <button class="confirm" type="button" @click="checkLoveCode">
              确 定
            </button>
            <button class="cancel" type="button" @click="cancel">取 消</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Home from "@theme/components/Home";
import HomeBlog from "@theme/components/HomeBlog";
import Page from "@theme/components/Page";
import Footer from "@theme/components/Footer";
import Common from "@theme/components/Common";
import Rotate from "@theme/components/Rotate";
import { resolveSidebarItems } from "@theme/helpers/utils";
export default {
  components: { HomeBlog, Home, Page, Common, Footer, Rotate },
  watch: {
    $route: {
      handler(obj) {
        // console.log("obj.path :>> ", obj.path);
        let p = /^(\/docs\/thoseYears\/)/;
        if (p.test(obj.path)) {
          console.log("那些年 :>> ");
          this.isThoseYears();
          if (!this.loveCode) {
            this.showMask = true;
          }
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      showMask: false,
      // loveCode: localStorage.getItem("loveCode") || "",
      loveCode: "",
    };
  },
  computed: {
    sidebarItems() {
      return resolveSidebarItems(
        this.$page,
        this.$page.regularPath,
        this.$site,
        this.$localePath
      );
    },
    homeCom() {
      const { type } = this.$themeConfig;
      if (type !== undefined) {
        return type == "blog" ? "HomeBlog" : type;
      }
      return "Home";
    },
  },
  methods: {
    isThoseYears() {
      // 动态切换挂件图片
      let picBox = this.$root.$children[0].$children[0].$children[1];
      // picBox.oPicArr = [
      //   "http://cdn.xiaomaike.space/img/image-20210325095635580.png",
      //   "2.jpg",
      //   "3.jpg",
      //   "4.jpg",
      //   "5.jpg",
      //   "6.jpg",
      // ];
      picBox.oPicArr.splice(
        0,
        1,
        "http://cdn.xiaomaike.space/img/image-20210325095635580.png"
      );
      // console.log("root :>> ", this.$root.$children[0]);
      // 动态切换背景音乐
      let bgmBox = this.$root.$children[2]; // 音乐组件
      let isNeedAdd = true;
      for (let item of bgmBox.audio) {
        if (item.artist == "那些年") {
          isNeedAdd = false;
        }
      }
      if (isNeedAdd) {
        bgmBox.audio.unshift({
          artist: "那些年",
          cover:
            "http://cdn.xiaomaike.space/img/image-20210318155711953.png",
          name: "测试",
          url: "/static/1.mp3",
        });
      }
      this.$nextTick(() => {
        // bgmBox.$refs.bgm.play();
        bgmBox.playBgm();
      });
    },
    checkLoveCode() {
      console.log("this.loveCode :>> ", this.loveCode);
      if (!this.loveCode) {
        return;
      }
      if (this.loveCode != "1014") {
        this.$router.go(-1);
      } else {
        // if (!localStorage.hasOwnProperty("loveCode")) {
        //   localStorage.setItem("loveCode", this.loveCode);
        // }
        this.showMask = false;
      }
    },
    cancel() {
      this.showMask = false;
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="stylus">
@require '../styles/theme.styl';

.mask-box {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  background-color: #f6f6f6;

  .dialog {
    box-shadow: 0px 0px 0px 100vw rgba(0, 0, 0, 0.35);
    background-color: white;
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translateY(-50%);
    transform: translateX(-50%);
    z-index: 999;
    border-radius: 5px;

    .title {
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      background-color: #f3f3f3;
      padding: 5px 0px;
      font-weight: 600;
      text-align: center;
    }

    .content {
      padding: 2rem;

      // padding-right: 30px;
      .input-love-code {
        text-align: center;

        label {
          display: inline-block;
          text-align: left;
        }

        input {
          padding: 3px 0px;
          border-radius: 3px white;
          outline-color: #8cc5ff;
        }
      }

      .action {
        margin-top: 10px;
        text-align: center;

        .confirm {
          font-size: 16px;
          padding: 5px;
          color: black;
          background-color: #409eff;
          color: white !important;
          border: 1px solid #dcdfe6;
          border-radius: 5px;
          cursor: pointer;
          box-shadow: 0px 0px 5px 5px #ecf5ff;
          margin-right: 5px;
          outline: none;
        }

        .cancel {
          font-size: 16px;
          padding: 5px;
          color: black;
          border: 1px solid #dcdfe6;
          border-radius: 5px;
          cursor: pointer;
          box-shadow: 0px 0px 5px 5px #ecf5ff;
          margin-right: 5px;
          outline: none;
        }
      }
    }
  }
}
</style>
